<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <!-- <div id="allmap">
              <el-row>
                <el-col :span="12">
                  <el-row>
                    <div class="newbutton" @click="handle_replace"></div>
                  </el-row>
                  <el-row>
                    <div
                      id="topology-canvas"
                      class="full"
                      @contextmenu="onContextMenu($event)"
                    ></div>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <el-row>
                    <div id="table4"></div>
                  </el-row>
                </el-col>
              </el-row>
              <el-row>
                <div>
                  <el-row>
                    <el-col :span="8">
                      <el-row>
                        <div id="table1"></div>
                      </el-row>
                    </el-col>
                    <el-col :span="8">
                      <el-row>
                        <div id="table2"></div>
                      </el-row>
                    </el-col>
                    <el-col :span="8">
                      <el-row>
                        <div id="table3">
                          <el-table
                            :data="tableData"
                            style="width: 90%;margin-top:0px;"
                            :row-style="getRowClass"
                            :header-row-style="getRowClass"
                            :header-cell-style="getRowClass2"
                            :row-class-name="tableRowClassName"
                          >
                            <el-table-column prop="name1" label="" width="180">
                            </el-table-column>
                            <el-table-column
                              prop="name2"
                              label="负荷"
                              width="100"
                            >
                            </el-table-column>
                            <el-table-column prop="name3" label="上网">
                            </el-table-column>
                            <el-table-column prop="name4" label="用电">
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-row>
                    </el-col>
                  </el-row>
                </div>
              </el-row>
            </div> -->
            <template>
             
                <el-row style="margin-bottom:20px;">
              <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">
                  <font color="#A1FEDB" size="4">系统总览</font>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                  <font color="#A1FEDB" size="4">功率曲线</font>
                </el-breadcrumb-item>
              </el-breadcrumb>
            </el-row>
             
              <el-row>
                 <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="电量总览" name="first">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <!-- <el-select v-model="value" placeholder="请选择">
                          <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :option1="item.value"
                          >
                          </el-option>
                        </el-select> -->
                        <span class="demonstration">月份：</span>
                        <el-date-picker
                          v-model="value1"
                          type="month"
                          placeholder="选择月"
                          @change="selectbytime()"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table1"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <!-- <el-table
                      :data="tableData1"
                      style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="data1" label="日期">
                      </el-table-column>
                      <el-table-column prop="data2" label="上网电量(KWH)">
                      </el-table-column>
                      <el-table-column prop="data3" label="用网电量(KWH)">
                      </el-table-column>
                    </el-table> -->
                    <el-table
                      :data="tableData11"
                      style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="日期" label="日期">
                      </el-table-column>
                      <el-table-column prop="上网电量" label="上网电量(kWH)">
                      </el-table-column>
                      <el-table-column prop="用网电量" label="用网电量(KWH)">
                      </el-table-column>
                    </el-table>
                  </el-row>
                </el-tab-pane>
                <el-tab-pane label="发电分析" name="second">
                  <el-tabs
                    tab-position="left"
                    v-model="activeName2"
                    @tab-click="handleClick"
                  >
                    <el-tab-pane label="光伏发电" name="one">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <span class="demonstration">月份：</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月"
                              @change="selectbytime()"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table2"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData2"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column prop="发电量" label="本期电量(kWH)">
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="卧式风机发电" name="two">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <!-- <el-select v-model="value" placeholder="请选择">
                              <el-option
                                v-for="item in options2"
                                :key="item.value"
                                :label="item.label"
                                :option="item.value"
                              >
                              </el-option>
                            </el-select> -->

                            <span class="demonstration">月份：</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月"
                              @change="selectbytime()"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table12"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData3"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column prop="发电量" label="本期电量(kWH)">
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="垂直风机发电" name="three">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <span class="demonstration">月份：</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月"
                              @change="selectbytime()"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table25"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData4"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column prop="发电量" label="本期电量(kWH)">
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="三联供发电" name="four">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <span class="demonstration">月份：</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月"
                              @change="selectbytime()"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table24"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData5"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column prop="发电量" label="本期电量(kWH)">
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                  </el-tabs>
                </el-tab-pane>
                <el-tab-pane label="储能分析" name="third">
                  <el-tabs
                    tab-position="left"
                    v-model="activeName2"
                    @tab-click="handleClick"
                  >
                    <el-tab-pane label="蓄电池储能" name="one">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <span class="demonstration">日期</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月份"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table3"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData6"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column
                            prop="上网电量"
                            label="上网电量(kWH)"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="用网电量"
                            label="用网电量(KWH)"
                          >
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                    <el-tab-pane label="电容型储能" name="two">
                      <el-row class="el-row1">
                        <div style="margin-top:40px;margin-left:40px;">
                          <div class="block">
                            <span class="demonstration">月份：</span>
                            <el-date-picker
                              v-model="value1"
                              type="month"
                              placeholder="选择月份"
                            >
                            </el-date-picker>
                          </div>
                        </div>
                        <div id="table23"></div>
                      </el-row>
                      <el-row class="el-row2">
                        <el-table
                          :data="tableData7"
                          style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px;"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          :row-class-name="tableRowClassName"
                        >
                          <el-table-column prop="日期" label="日期">
                          </el-table-column>
                          <el-table-column
                            prop="上网电量"
                            label="上网电量(kWH)"
                          >
                          </el-table-column>
                          <el-table-column
                            prop="用网电量"
                            label="用网电量(KWh)"
                          >
                          </el-table-column>
                        </el-table>
                      </el-row>
                    </el-tab-pane>
                  </el-tabs>
                </el-tab-pane>

                <el-tab-pane label="用电分析" name="fourth">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <span class="demonstration">月份：</span>
                        <el-date-picker
                          v-model="value1"
                          type="month"
                          placeholder="选择月份"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table4"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData8"
                      style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="日期" label="日期">
                      </el-table-column>
                      <el-table-column prop="本日电量" label="本日电量(kWH)">
                      </el-table-column>
                      <el-table-column prop="本月电量" label="本月电量(KWH)">
                      </el-table-column>
                    </el-table> </el-row
                ></el-tab-pane>

                <el-tab-pane label="供热量分析" name="fifth">
                  <el-row class="el-row1">
                    <div style="margin-top:40px;margin-left:40px;">
                      <div class="block">
                        <span class="demonstration">月份：</span>
                        <el-date-picker
                          v-model="value1"
                          type="month"
                          placeholder="选择月份"
                        >
                        </el-date-picker>
                      </div>
                    </div>
                    <div id="table26"></div>
                  </el-row>
                  <el-row class="el-row2">
                    <el-table
                      :data="tableData9"
                      style="width: 90%;margin-left:100px;margin-top:50px;height:300px;overflow:auto;margin-bottom:50px;"
                      :row-style="getRowClass"
                      :header-row-style="getRowClass"
                      :header-cell-style="getRowClass2"
                      :row-class-name="tableRowClassName"
                    >
                      <el-table-column prop="name1" label="日期">
                      </el-table-column>
                      <el-table-column prop="name2" label="本日供热量(kWH)">
                      </el-table-column>
                      <el-table-column prop="name3" label="本月供热量(KWH)">
                      </el-table-column>
                    </el-table> </el-row
                ></el-tab-pane>
              </el-tabs>
              </el-row>
             
            </template>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      options1: [
        {
          value: '选项1',
          label: '月棒图'
        },
        {
          value: '选项2',
          label: '月棒图'
        },
        {
          value: '选项3',
          label: '月棒图'
        },
        {
          value: '选项4',
          label: '月棒图'
        },
        {
          value: '选项5',
          label: '月棒图'
        }
      ],
      option1: '',

      options2: [
        {
          value: '选项1',
          label: 'mppt1'
        },
        {
          value: '选项2',
          label: 'mppt2'
        },
        {
          value: '选项3',
          label: 'mppt3'
        },
        {
          value: '选项4',
          label: '并网逆变器'
        },
        {
          value: '选项5',
          label: '友好并网计算'
        }
      ],
      option2: '',

      options3: [
        {
          value: '选项1',
          label: '1#逆变器'
        },
        {
          value: '选项2',
          label: '2#逆变器'
        },
        {
          value: '选项3',
          label: '3#逆变器'
        },
        {
          value: '选项4',
          label: '4#逆变器'
        },
        {
          value: '选项5',
          label: '5#逆变器'
        }
      ],
      option3: '1#逆变器',

      options4: [
        {
          value: '选项1',
          label: '充电桩'
        },
        {
          value: '选项2',
          label: '室内直流负荷'
        },
        {
          value: '选项3',
          label: '直流配电室'
        },
        {
          value: '选项4',
          label: '交流配电箱'
        }
      ],
      option4: '',

      tableData: [
        {
          name1: '1',
          name2: '46.89',
          name3: '21.98'
        },
        {
          name1: '2',
          name2: '87',
          name3: '37.8'
        },
        {
          name1: '3',
          name2: '75',
          name3: '36.4'
        },
        {
          name1: '4',
          name2: '9.5',
          name3: '66'
        },
        {
          name1: '5',
          name2: '10.9',
          name3: '113'
        },
        {
          name1: '6',
          name2: '10.9',
          name3: '113'
        },
        {
          name1: '7',
          name2: '10.9',
          name3: '113'
        }
      ],
      tableData11: [],
      tableData2: [],
      tableData3: [],
      tableData4: [],
      tableData5: [],
      tableData6: [],
      tableData7: [],
      tableData8: [],
      tableData9: [],
      tableData22: [],
      tools: Tools,
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'left',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      },
      value1: '',
      value2: '',

      activeIndex: '3',

      activeName: 'first',
      activeName2: 'one',
      power1: '',
      power2: '',
      power3: '',
      power4: '',
      power5: '',
      power6: '',
      power7: '',
      power8: '',
      power9: '',
      power10: '',
      power11: '',
      power12: '',
      scroll: true,
      value: ''
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu,
    Index,
    Bottom
  },
  computed: {
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {},

  mounted() {
    this.value1 = this.getNowFormatDate()
    this.value2 = this.value1
    this.readdata()
    this.laterpowercurve()
  },

  methods: {
    selectbytime() {
      this.value2 = this.getFormatDate(this.value1)
      this.readdata()
      this.laterpowercurve()
    },
    //获取页面所需数据
    readdata() {
      //一晚上的问题，明明前台接受到数据，echarts就是不显示，原因还是，这个后台请求响应比较慢，
      //在后台返回相应数据的时候，前台图表已经加载了，所以数据返回后没来及加载。照成显示不了，找了一晚上的问题。
      this.$axios({
        method: 'get',
        params: {
          // name: name,
          date: this.value2
        },
        url: 'http://127.0.0.1:8082/comprehensive/searchbydate'
      }).then(res => {
        //电量总览数据
        this.tableData11 = res.data[0][2]
        this.power1 =Math.abs(res.data[0][0]) 
        this.power2 = Math.abs(res.data[0][1])
        //光伏发电
        this.tableData2 = res.data[1][1]
        this.power3 = Math.abs(res.data[1][0])
        //卧式风力发电机
        this.power4 = Math.abs(res.data[2][0])
        this.tableData3 = res.data[2][1]
        //垂直风力发电机
        this.power5 = Math.abs(res.data[3][0])
        this.tableData4 = res.data[3][1]
        //三联供发电机
        this.power6 = Math.abs(res.data[4][0])
        this.tableData5 = res.data[4][1]
        //蓄电池储能
        this.power7 = Math.abs(res.data[5][0])
        this.power8 = Math.abs(res.data[5][1])
        this.tableData6 =res.data[5][2]
        //超级电容储能
        this.power9 =  Math.abs(res.data[6][0])
        this.power10 =  Math.abs(res.data[6][1])
        this.tableData7 = res.data[6][2]
        //用电分析数据
        this.power11 = Math.abs(res.data[7][0]) 
        this.power12 =Math.abs(res.data[7][1]) 
        this.tableData8 = res.data[7][2]
        //供热分析
      })
    },
    //延迟执行函数
    laterpowercurve() {
      setTimeout(() => {
        this.showecharts()
      }, 65000)
    },
    //时间格式转换器
    getNowFormatDate() {
      var date = new Date()
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    //通用时间格式转换器
    getFormatDate(date) {
      var seperator1 = '-'
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate
      return currentdate
    },
    showecharts() {
      let myChart1 = this.$echarts.init(document.getElementById('table1'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['上网电量', '用网电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'bar',
            itemStyle: {
              normal: {
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              }
            },
            data: this.power1
          },
          {
            name: '用网电量',
            type: 'bar',
            itemStyle: {
              normal: {
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 1,
                      color: '#EA8116'
                    }
                  ]
                )
              }
            },
            data: this.power2
          }
        ]
      }
      myChart1.setOption(option)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart1.resize()
      })
      //光伏发电曲线
      let myChart2 = this.$echarts.init(document.getElementById('table2'))
      let option2 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['发电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '发电量',
            type: 'bar',
            data: this.power3
          }
        ]
      }
      myChart2.setOption(option2)

      window.addEventListener('resize', function() {
        myChart2.resize()
      })
      //卧式风力发电机曲线
      let myChart12 = this.$echarts.init(document.getElementById('table12'))
      let option12 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['发电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '发电量',
            type: 'bar',
            data: this.power4
          }
        ]
      }
      myChart12.setOption(option12)
      //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
      window.addEventListener('resize', function() {
        myChart12.resize()
        myChart24.resize()
        myChart25.resize()
        // myChart26.resize()
      })
      //三联供发电曲线
      let myChart24 = this.$echarts.init(document.getElementById('table24'))
      let option24 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['本期电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '本期电量',
            type: 'bar',
            data: this.power6
          }
        ]
      }
      myChart24.setOption(option24)
      //卧式风力发电曲线
      let myChart25 = this.$echarts.init(document.getElementById('table25'))
      let option25 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['发电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '发电量',
            type: 'bar',
            data: this.power5
          }
        ]
      }
      myChart25.setOption(option25)
      //供热分析
      let myChart26 = this.$echarts.init(document.getElementById('table26'))
      let option26 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['本日供热量', '本月供热量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '热量(KWH)',

            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '本日供热量',
            type: 'bar',
            // data: this.power5
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134
            ]
          },
          {
            name: '本月供热量',
            type: 'bar',
            // data: this.power6
            data: [
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134,
              90,
              230,
              210,
              120,
              132,
              101,
              134
            ]
          }
        ]
      }
      myChart26.setOption(option26)
      //蓄电池储能曲线
      let myChart3 = this.$echarts.init(document.getElementById('table3'))
      let option3 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['上网电量', '用网电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'bar',
            data: this.power7
          },
          {
            name: '用网电量',
            type: 'bar',
            data: this.power8
          }
        ]
      }
      myChart3.setOption(option3)

      window.addEventListener('resize', function() {
        myChart3.resize()
      })
      //超级电容电池
      let myChart23 = this.$echarts.init(document.getElementById('table23'))
      let option23 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['上网电量', '用网电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            min: 0,
            max: 250,
            interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '上网电量',
            type: 'bar',
            data: this.power9
          },
          {
            name: '用网电量',
            type: 'bar',
            data: this.power10
          }
        ]
      }
      myChart23.setOption(option3)
      //用电分析曲线
      let myChart4 = this.$echarts.init(document.getElementById('table4'))
      let option4 = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          textStyle: {
            color: '#ffffff'
          },
          data: ['本日电量', '本月电量']
        },
        xAxis: [
          {
            type: 'category',
            name: '单位/天',
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#ffffff'
              }
            },
            data: [
              '1',
              '2',
              '3',
              '4',
              '5',
              '6',
              '7',
              '8',
              '9',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23',
              '24',
              '25',
              '26',
              '27',
              '28',
              '29',
              '30'
            ],
            axisPointer: {
              type: 'shadow',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '电量(KWH)',

            // min: 0,
            // max: 250,
            // interval: 50,
            axisLine: {
              lineStyle: {
                type: 'solid',
                color: 'white', //左边线的颜色
                width: '2' //坐标线的宽度
              }
            },
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                color: '#ffffff'
              }
            }
          }
        ],
        series: [
          {
            name: '本日电量',
            type: 'bar',
            data: this.power11
          },
          {
            name: '本月电量',
            type: 'bar',
            data: this.power12
          }
        ]
      }
      myChart4.setOption(option4)

      window.addEventListener('resize', function() {
        myChart4.resize()
      })
    },

    getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#063432;color:#FEFEFE;' transparent
      return 'background: transparent;color:#FEFEFE;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      return 'background: transparent;color:#FEFEFE;'
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      return 'background: transparent;color:#FEFEFE;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="less">
.el-tabs {
  color: white;
  background-color: #050e11;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
</style>
<style lang="less" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.el-row1 {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/新UI53.png);
  background-repeat: no-repeat;
}
.el-row2 {
  width: 100%;
  height: 100%;
  background-image: url(../../assets/images/新UI53.png);
  background-repeat: no-repeat;
}
.el-tabs {
  color: white;
  background-color: #050e11;
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
#topology-canvas {
  width: 910px;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
//控制画布的大小
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;
  // background-image: url("+require('../assets/images/timg.jpg')")
}

#table1 {
  width: 100%;
  height: 488px;

  // background-image: url(../../assets/images/新UI45.png);
  // background-size: 100%;
  // background-repeat: no-repeat;
}

#table2 {
  width: 1700px;
  height: 488px;
}
#table12 {
  width: 1700px;
  height: 488px;
}
#table24 {
  width: 1700px;
  height: 488px;
}
#table25 {
  width: 1700px;
  height: 488px;
}
#table26 {
  width: 1700px;
  height: 488px;
}
#table3 {
  width: 1700px;
  height: 488px;
}
#table23 {
  width: 1700px;
  height: 488px;
}
#table4 {
  width: 1700px;
  height: 488px;
  // margin-top: 40px;
  // margin-left: 60px;
  // padding-left: 0px;
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}
.newstyle {
  // background-image: url(../assets/images/新UI.png);
  // padding-top: 50px;
  // margin-left: 23px;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
